<template>
  <div class="flow-box">
    <div class="title">
      <div>
        使用日志
      </div>
      <div class="btn" style="margin-left: 2vw">
        <el-button @click="showSearch">
          查询
        </el-button>
      </div>
      <div class="btn" style="margin-left: 2vw" v-if="isCancel">
        <el-button type="primary" @click="cancle">
          取消
        </el-button>
      </div>
    </div>
    <el-table
        :data="tableData"
        stripe
        style="width: 95%;height: 91vh;margin: 0 auto"
        border
        max-height="91vh"
        empty-text="暂无数据"
    >
      <el-table-column
          fixed
          label="ID"
          width="60"
          prop="seal_flow_id"
          align="center"
      />
      <el-table-column
          prop="uploadername"
          label="申请人"
          width="200"
          align="center"
      />
      <el-table-column
          label="申请时间"
          width="250  "
          align="center"
      >
        <template #default="{row}">
          {{computeDate(row.created_at)}}
        </template>
      </el-table-column>
      <el-table-column
          label="类型"
          align="center"
          width="250"
      >
        <template #default="{row}">
          <el-tag type="warning" v-if="row.seal_log_type === 0">公章</el-tag>
          <el-tag type="success" v-else-if="row.seal_log_type === 1">法人章</el-tag>
          <el-tag type="success" v-else>合同章</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
      >
        <template #default="{row}">
          <el-button
              type="primary"
              size="small"
              @click="showDetails(row.seal_log_flow_id)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <PreViewDialog ref="previewDialog" @refreshLog="getList"/>


  <el-dialog
      v-model="dialogVisible"
      title="根据条件查询"
      style="width:25vw;font-family: dingding;text-align: left"
  >
    <el-form :model="filForm" label-width="auto">
      <el-form-item label="条件" style="text-align: center">
        <el-select v-model="filForm.condition" style="width:20vw">
          <el-option
              v-for="item in selectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="目标" style="text-align: center" v-if="searchType === 1">
        <el-input v-model="filForm.value" style="width:20vw"/>
      </el-form-item>
      <el-form-item label="目标" style="text-align: center" v-else-if="searchType === 2">
        <el-select v-model="filForm.value" style="width:20vw">
          <el-option
              v-for="item in typeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="目标" style="text-align: center" v-else-if="searchType === 0">
        <el-date-picker
            style="width:20vw"
            v-model="filForm.value"
            type="date"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClose">
          取消
        </el-button>
        <el-button type="primary" @click="doSearch">
          查询
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {ElButton, ElDialog, ElTable, ElTableColumn, ElTag, ElForm, ElFormItem, ELOption} from "element-plus"
import PreViewDialog from "@/components/Common/OA/Seal/PreviewSealDialog.vue"
import {delSealApprove, getAllMySealApprove, getLogByCondition, getLogList, returnSealById} from "@/api/OA/Seal"
import {onMounted, reactive, ref, watch} from "vue"
import {computeDate, createMsg, getUserInfo} from "@/lib/utils"
import emitter from "@/lib/eventBus"


const tableData = ref([])
let userInfo = {}
const previewDialog = ref()
const isCancel = ref(false)

const searchType = ref(1)

const selectOption = [
  {
    label:'创建时间',
    value:'created_at'
  },{
    label:'发起人',
    value:'seal_log_uploader'
  },{
    label:'用章类型',
    value:'seal_log_type'
  },
]

const typeOption = [
  {
    label:'公章',
    value:0,
  },{
    label:'法人章',
    value:1
  },{
    label:'合同章',
    value:2
  },
]

const filForm = reactive({
  condition:'seal_log_uploader',
  value:null,
})
const dialogVisible = ref(false)

onMounted(()=>{
  emitter.emit('home_menu','/OA/seal/usage-log')
  userInfo = getUserInfo()
  getList()
  emitter.on('reloadSeal',()=>{
    getApproveList()
  })
})


const getList = async () => {
  try {
    const {data:res} = await getLogList()
    if (res.code === 200){
      tableData.value = res.data
    } else if (res.code === 201){
      // createMsg('暂无数据','info',true)
    } else if (res.code === 400 ||res.code === 401 ||res.code === 402){
      createMsg('未查询到数据','info',true)
    }
  } catch (e) {
    console.log(e)
  }
}

const showDetails = async (id) => {
  previewDialog.value.showDetails(id)

}

const showSearch = () => {
  dialogVisible.value = true
}

const doSearch = async () => {
  try {
    if (filForm.value === '' || filForm.condition === ''){
      return createMsg('查询不能为空','error',false)
    }
    const {data:res} = await getLogByCondition(filForm)
    if (res.code === 200){
      createMsg('查询成功!','success',true)
      dialogVisible.value = false
      tableData.value = res.data
      isCancel.value = true
    } else if (res.code === 201){
      dialogVisible.value = false
      createMsg('暂无满足条件的记录')
    } else {
      dialogVisible.value = false
      createMsg('未查询到数据')
    }
  } catch (e) {
    console.log(e)
  }
}

const cancle = () => {
  isCancel.value = false
  filForm.value = null
  filForm.condition = 'seal_log_uploader'
  getList()
  createMsg('已取消','success',true)
}

const handleClose = () => {
  dialogVisible.value = false
  searchType.value = 1
  filForm.value = null
  filForm.condition = 'seal_log_uploader'
  // getList()
}

watch(()=>filForm.condition,()=>{
  if (filForm.condition === 'created_at'){
    searchType.value = 0
    filForm.value = null
  } else if (filForm.condition === 'seal_log_uploader'){
    searchType.value = 1
    filForm.value = null
  } else if (filForm.condition === 'seal_log_type'){
    searchType.value = 2
    filForm.value = null
  }
})

</script>

<style scoped lang="less">
.flow-box{
  width: 89%;
  /* margin: 0 auto; */
  margin-left: 9vw;
  height: 96%;
  background-color: rgba(250, 250, 250);
  margin-top: 2vh;
  .title{
    height: 5vh;
    text-align: left;
    line-height: 5vh;
    font-size: 2.5vh;
    margin-left: 1vw;
    font-family: dingding;
    display: flex;
  }
}
</style>
